<template>
  <div class="v-input">
    <input
      class="v-input__inner"
      :type="type"
      :placeholder="placeholder"
      :value="modelValue"
      :disabled="disabled"
      :maxlength="maxlength"
      @input="$emit('update:modelValue', $event.target.value)"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    >
  </div>
</template>

<script setup>

const props = defineProps({
  // 绑定值
  modelValue: {
    type: String,
    default: ''
  },
  // 输入框类型
  type: {
    type: String,
    default: 'text'
  },
  // 占位符
  placeholder: {
    type: String,
    default: ''
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 最大长度
  maxlength: {
    type: Number
  }
})
</script>

<style lang="scss" scoped>
@use '@styles/variables' as *;
.v-input {
  display: inline-block;
  width: 100%;

  &__inner {
    width: 100%;
    height: $height-base;
    padding: 0 15px;
    font-size: $font-size-base;
    line-height: 1;
    color: $text-color;
    background-color: #fff;
    background-image: none;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

    &:focus {
      outline: none;
      border-color: $primary-color;
    }

    &:disabled {
      background-color: #f5f7fa;
      border-color: #e4e7ed;
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &::placeholder {
      color: $text-color-placeholder;
    }
  }
}
</style>
